import React from 'react';
// 1. 控制表单元素的值的显示，将表单元素的值作为组件状态维护
// 2. 控制表单元素值的变化

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      txt: '123',
    };
  }

  // 输入变化事件处理函数
  handleChange = (e) => {
    console.log('change=======', e.target.value);
    // 把最新的输入框的值，设置到当前组件状态中
    this.setState({
      txt: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <input
          type={'text'}
          // 1. 控制表单元素的值的显示，将表单元素的值作为组件状态维护
          value={this.state.txt}
          // 2. 控制表单元素值的变化
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default App;
